import React, { Component } from 'react';
import {
  Text,
  View,
  FlatList,
  ActivityIndicator,
  RefreshControl
} from 'react-native';
class CustomFlatList extends React.PureComponent {

  

  state = {
    selected: (new Map(): Map<string, boolean>),
    animating:false,
    refreshAnimating:false,
    isRefreshing:false
  };

  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
    this.setState((state) => {
      // copy the map rather than modifying state.
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
  };

  // _renderItem = (data) => {
  //   let {item} = data;
  //   return (
  //     <CustomFlatListItem
  //       id={item.id}
  //       onPressItem={this._onPressItem}
  //       selected={!!this.state.selected.get(item.id)}
  //       title={item.title}
  //     >
  //     {this.props.renderItem(data)}
  //     </CustomFlatListItem>
  //   )
  // };
  //加载中
  renderLoading = ()=>{
    if(!this.state.animating) return null;
    return (
      <View style={{flexDirection:'row',justifyContent:'center',height:40,alignItems:'center'}}>
        <ActivityIndicator
          animating={this.state.animating}
          size="small"
          color={'#666'}
        />
        <Text style={{fontSize:12,color:'#666',marginLeft:4}}>正在加载...</Text>
      </View>
    )
  }

  //上拉加载事件
  _onEndReached = () =>{
    let {animating} = this.state;
    if(animating)return;
    this.setState({animating:true})
    this.timer = setTimeout(()=>{
      clearTimeout(this.timer);
      this.props.onEndReached()
      this.setState({animating:false})
    },3000)
  }
  //下拉效果
  renderRefreshLoading = () =>{
    if(this.state.refreshAnimating){
      return (
        <View style={{flexDirection:'row',justifyContent:'center',height:40,alignItems:'center'}}>
          <ActivityIndicator
            animating={this.state.refreshAnimating}
            size="small"
            color={'#666'}
          />
          <Text style={{fontSize:12,color:'#666',marginLeft:4}}>正在刷新</Text>
        </View>
      )
    }
    return null
    
  }
  //下拉加载
  _onRefresh = () =>{
    let {isRefreshing} = this.state;
    this.setState({
      isRefreshing:true
    })
    if(this.props._onRefresh){
      this.props._onRefresh(this._stopRefresh)
    }
  }
  _stopRefresh = () =>{
    this.setState({
      isRefreshing:false
    })
  }


  render() {
    console.log(this.props.data , "====new")
    return (
      <FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this.props.renderItem}
        ListFooterComponent={this.renderLoading}
        onEndReached={this._onEndReached}
        onEndReachedThreshold={this.props.onEndReachedThreshold||0.3}
        onViewableItemsChanged = {(a,b,c)=>{
          // console.log(a,"====",b,"=====",c)
        }}
        refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh}
            tintColor="#666"
            title={"刷新中"}
            titleColor="#666"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
          />
        }
        
      />
    );
  }
};

class CustomFlatListItem extends React.PureComponent {

  render() {
    return (
      <View>
      {this.props.children}
      </View>
    )
  }
}

module.exports = {CustomFlatList,CustomFlatListItem}
